<template>
    <div class="flower-card">
        <div class="pic">
            <img :src="product.imageUrl" alt="">
        </div>

    <div class="state">         
    <div calss="price">
    ￥{{product.price}}
    </div>

    <div class="sales">
          已售:{{ product.sales_volume }}
          </div>
            </div>


    <div class="category">
        {{product.category}}
    </div>


    <div calss="introduction">
        {{product.introduction}}
    </div>
     </div>


</template>

<script>
    export default{
        name:'FlowerCard',
        props:{
            product:{
                type: Object,
                required: true
            }
        }
    } 
</script>

<style>
      .price{
        color:red;
        font-size:18px;
        font-weight:bold;
      }
     .pic{
        height:150px;
        overflow:hidden;
        margin-bottom:5px;
     }
     .pic img{
        width:100%;
     }

     .flower-card{
        border:1px solid #e0e0e0;
        padding:10px;
        border-radius:10px;
        overflow:hidden;
     }
     .state{
        display:flex;
        justify-content:space-between;
        align-items:center;
        border-radius:15px;
     }
     .category, .introduction{
        text-align:left;
     }
     .category{
        font-weight:bold;
     }
     .introduction{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;

     }
     .introduction:hover{
        overflow:visible;
        white-space:wrap;
     }
</style>
